<template>
  <li>

    <!-- 修改中 -->
    <template v-if="isEditing">
      <input type="text" v-model="editingValue">
      <button @click="onEditOk">确认</button>
    </template>

    <!-- 没修改中 -->
    <template v-else>
      {{ value }}
      <button @click="isEditing = true">修改</button>
    </template>

    <button @click="onDel">删除</button>
  </li>
</template>

<script>
export default {
  // readonly 只读
  props: {
    value: String,
    id: Number,
    editingId: Number,
  },
  data () {
    return {
      editingValue: this.value,
      isEditing: false,
    };
  },
  methods: {
    onDel () {
      // this.$emit('自定义事件名', ...args);
      this.$emit('onDel', this.id);
    },
    // 确认修改
    onEditOk () {
      this.$emit('onEditOk', this.id, this.editingValue);
      // 置回修改状态
      this.isEditing = false;
    },
  },
}
</script>

<style scoped>

</style>